<template>
  <div>
    <a-card class="card" title="输入医生信息" :bordered="false">
      <a-form :form="form" class="form" @submit="handleSubmit">
        <a-row class="form-row" :gutter="16">
          <!--          <a-col :lg="6" :md="12" :sm="24">-->
          <!--            <a-form-item label="id">-->
          <!--              <a-input-->
          <!--                placeholder="请输入ID"-->
          <!--                v-decorator="[-->
          <!--                  'id',-->
          <!--                  {rules: [{ required: false, message: '请输入id', whitespace: true}]}-->
          <!--                ]"-->
          <!--                :disabled="true"/>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="姓名">
              <a-input
                placeholder="请输入姓名"
                v-decorator="[
                  'name',
                  {rules: [{ required: true, message: '请输入姓名', whitespace: true},{pattern: /[\w\u4e00-\u9fa5]/g,message: '输入正确姓名'}]}
                ]" />
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="年龄">
              <a-input
                placeholder="请输入年龄"
                v-decorator="[
                  'age',
                  {rules: [{ required: true, message: '请输入年龄', whitespace: true},{ digits: true, message: '输入正确的年龄'}]}
                ]" />
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item
              label="性别">
              <a-select
                placeholder="请选择性别"
                v-decorator="[ 'gender', {rules: [{ required: true, message: '请选择性别'}]} ]">
                <a-select-option value="0">男</a-select-option>
                <a-select-option value="1">女</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="证件类型">
              <a-select
                placeholder="请选择证件类型"
                v-decorator="[ 'carType', {rules: [{ required: true, message: '请选择证件类型'}]} ]">
                <a-select-option v-for="c in cl" :key="c.key">{{ c.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="证件号">
              <a-input
                placeholder="请输入证件号"
                v-decorator="[
                  'carId',
                  {rules: [{ required: true, message: '请输入证件号', whitespace: true},{pattern : /[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]/, message: '输入正确的身份证号'}]}
                ]"/>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xl="{span: 6, offset: 1}">
            <a-form-item label="电话号码">
              <a-input
                placeholder="请输入电话号码"
                v-decorator="[
                  'phone',
                  {rules: [{ required: true, message: '请输入电话号码', whitespace: true},{ pattern : /[1][3,4,5,7,8][0-9]{9}/,message: '请输入正确的电话号码' }]}
                ]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24" >
            <a-form-item
              label="所属部门">
              <a-select
                placeholder="所属部门"
                v-decorator="[ 'department', {rules: [{ required: true, message: '请选择部门'}]} ]">
                <a-select-option v-for="d in dp" :key="d.key">{{ d.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xl="{span: 6, offset: 1}">
            <a-form-item
              label="职级">
              <a-select
                placeholder="职级"
                v-decorator="[ 'level', {rules: [{ required: true, message: '请选择职级'}]} ]">
                <a-select-option v-for="d in dl" :key="d.key">{{ d.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-item label="描述">
              <a-input
                placeholder="你对工作的期待"
                v-decorator="[
                  'description',
                  {rules: [{required:true,message:'输入你对工作的期待',whitespace:true}]}
                ]"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" >
            <a-form-item
              label="职位">
              <a-select
                placeholder="职位"
                v-decorator="[ 'role_id', {rules: [{ required: true, message: '请选择'}]} ]">
                <a-select-option value="doctor">医生</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xl="{span: 6, offset: 1}">
            <a-form-item
              label="同意时间">
              <a-date-picker
                v-decorator="[ 'time', {rules: [{ required: true, message: '请选择日期'}]} ]"
              >
              </a-date-picker>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
        >
          <a-button htmlType="submit" type="primary">提交</a-button>
          <a-button style="margin-left: 8px" @click="goback">返回</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { addDoctorEntry } from '@/api/doctorEntry'
import { departmentList, doctorLevelList, carTypeList } from '@/dictionary'
export default {
  name: 'AddDoctor',
  data () {
    return {
      dp: departmentList,
      dl: doctorLevelList,
      cl: carTypeList,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          const ndata = {
            ...this.form.getFieldsValue(['name', 'age', 'gender', 'carType',
              'carId', 'phone', 'department', 'level', 'time', 'description', 'role_id']),
            state: 0,
            step: 1,
            applicant: this.$store.getters.userInfo.name
          }
          console.log('handleSubmit', ndata)
          addDoctorEntry(ndata).then(res => {
            this.$router.push('/doctor/result')
            this.$notification.success({
              message: '成功',
              description: `提交成功`
            })
          }).catch(err => {
            console.log('err', err)
            this.$notification.error({
              message: '失败',
              description: `提交失败`
            })
            this.loading = false
          })
        }
      })
    },
    goback () {
      this.$router.push('/doctor/index')
    }
  }
}
</script>
